import datarover from "./datarover.mjs";
import render_helper from "./render_helper.mjs";
import thin_render from "./thin_render.mjs";

export function multiselect_template({ container, template }) {
  let multiselect = document.createElement("multiselect");
  container.appendChild(multiselect);

  multiselect.name = template.multiselect;

  multiselect.thin_selected = datarover(container, template.bind);

  render_helper(multiselect, {
    id: template.multiselect,
    name: template.multiselect,
    height: template.height,
    width: template.width,
    event: template.event,
  });

  multiselect.innerText = datarover(container, template.bind).join(",");
  // 隐藏的input，用于保存选中的数据
  // let input = document.createElement("input");
  // multiselect.appendChild(input);
  // render_helper(input, {
  //   type: "hidden",
  //   name: template.multiselect,
  //   bind: template.bind,
  //   // event: template.event,
  // });

  multiselect.onclick = (ev) => {
    let options;

    let [...selected_data] = multiselect.thin_selected; // 复制一份数据，防止引用问题

    console.log({ selected_data });

    if (Array.isArray(template.options)) {
      options = template.options;
    } else if (typeof template.options === "function") {
      options = template.options({
        container,
        data: nearest_data(container),
      });
    } else if (typeof template.options === "string") {
      options = datarover(container, template.options);
    }

    console.log({ options });

    let dialog = document.createElement("dialog");
    container.appendChild(dialog);

    thin_render(dialog, [
      {
        li: [
          {
            input: "select",
            type: "checkbox",
            after: ({ container, data }) => {
              container.checked = selected_data.includes(data);
            },
            event: {
              change: (e) => {
                // console.log(e);
                e.event.stopPropagation(); //
                if (e.sender.checked) {
                  selected_data.push(e.org_data);
                } else {
                  const index = selected_data.indexOf(e.org_data);
                  if (index > -1) {
                    selected_data.splice(index, 1);
                  }
                }
                console.log({ selected: selected_data });
              },
            },
          },
          "[[.]]",
        ],
        data: options,
      },
      {
        div: [
          {
            button: "cancel",
            click: () => {
              container.removeChild(dialog);
            },
          },
          {
            button: "select",
            click: () => {
              container.removeChild(dialog);
              multiselect.innerText = selected_data.join(",");
              multiselect.thin_selected = selected_data;
              datarover(container, template.bind, selected_data);

              multiselect.dispatchEvent(new Event("change"));
            },
          },
        ],
      },
    ]);
    dialog.showModal();
  };
}
